<template>
	<div>
		<el-card class="box-card" shadow="never" style="height: 140px; width: 100%;">
			<el-form :model="payQO" ref="payQO">
				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="采购单编号" prop="cgNo" label-width="150px">
							<el-input v-model="payQO.cgNo" filterable clearable placeholder="请输入采购单编号"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="供应商" prop="riSname" label-width="150px">
							<el-select v-model="payQO.riSname" filterable clearable placeholder="请选择"
								style="width: 150px;">
								<el-option v-for="s in allSuppliers" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="状态" prop="payStatus" label-width="150px">
							<el-select v-model="payQO.payStatus" filterable clearable placeholder="请选择状态"
								style="width: 150px;">
								<el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="150px">
							<el-input v-model="payQO.riName" filterable clearable placeholder="请输入原料名称"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="商品名称" prop="cgGname" label-width="150px">
							<el-select v-model="payQO.cgGname" filterable clearable placeholder="请选择"
								style="width: 150px;">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-button type="info" plain @click="select(1)">查询</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="warning" plain
							@click="resetForm('payQO')">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
					</el-col>
				</el-row>
			</el-form>
		</el-card></br>

		<el-card class="box-card" shadow="never" style="height: 420px; width: 100%;">
			<el-table :data="currentPays" border>
				<el-table-column type="index"></el-table-column>
				<el-table-column prop="cgNo" label="采购单编号" align="center"></el-table-column>
				<el-table-column prop="cgGname,cgNum,cgUname" label="商品信息" align="center">
					<template slot-scope="scope">
						{{scope.row.cgGname}}{{scope.row.cgNum}}{{scope.row.cgUname}}
					</template>
				</el-table-column>
				<el-table-column prop="riName" label="原料名称" align="center"></el-table-column>
				<el-table-column prop="riNum" label="原料数量" align="center"></el-table-column>
				<el-table-column prop="riPrice" label="原料单价" align="center"></el-table-column>
				<el-table-column prop="riSname" label="供应商" align="center"></el-table-column>
				<el-table-column prop="payTotal" label="支付金额" align="center"></el-table-column>
				<el-table-column prop="payIn" label="添加时间" align="center"></el-table-column>
				<el-table-column prop="payEnd" label="更新时间" align="center"></el-table-column>
				<el-table-column prop="payStatus" label="入库单状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.payStatus == 1">待支付</span>
						<span v-if="scope.row.payStatus == 2">已完成</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-row v-if="scope.row.payStatus == 1">
							<el-button type="primary" plain @click="pay(scope)">支付</el-button>
						</el-row>
						<el-row v-if="scope.row.payStatus == 2">
							<el-button type="success" plain>已完成</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table></br>
			<el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
				:page-count="totalPage" @current-change="goPage">
			</el-pagination>
		</el-card>

	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: "yingfukuan",
		data() {
			return {
				// allGoods: [],
				// allUnits：[],
				// allSuppliers: [],
				// allStorages: [],

				payQO: {},
				currentPays: [],

				updatePay: {},

				status: [{
					value: '1',
					label: '待支付'
				}, {
					value: '2',
					label: '已完成'
				}],

				totalPage: 0,
				currentPage: 0,

				allGoods: [{
					name: '无籽蜜桔'
				}, {
					name: '武鸣沃柑'
				}, {
					name: '红富士苹果'
				}, {
					name: '新鲜牛排肉'
				}, {
					name: '新鲜五花肉'
				}, {
					name: '优质猪瘦肉'
				}, {
					name: '海鸭咸鸭蛋'
				}],
				allUnits: [{
					name: '千克'
				}, {
					name: '克'
				}, {
					name: '斤'
				}, {
					name: '个'
				}],
				allSuppliers: [{
					name: '沂蒙果蔬种植合作社'
				}, {
					name: '宏进冰鲜猪副产品批发'
				}, {
					name: '惠盈食用农产品经营部'
				}],
				allStorages: [{
					name: '成都生鲜仓库'
				}, {
					name: '上海生鲜仓库'
				}, {
					name: '武汉生鲜仓库'
				}],
			}
		},
		methods: {
			pay(scope) {
				this.updatePay = {
					...scope.row
				}
				this.$confirm('此操作将会支付订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post("/yingfukuanAPI/yingfukuan/pay", this.updatePay).then(res => {
						// if (res.data.code == 200) {
						this.goPage(this.currentPage);
						this.$message({
							type: 'success',
							message: '支付成功!'
						});
						// }
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			select(p) {
				axios.get("/yingfukuanAPI/yingfukuan/list/" + p, {
					params: this.payQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentPays = res.data.data.list;
						this.totalPage = res.data.data.pages;
						this.currentPage = 1;
						this.$message({
							type: 'success',
							message: '查询成功!'
						});
					}
				})
			},
			goPage(p) {
				axios.get("/yingfukuanAPI/yingfukuan/list/" + p, {
					params: this.payQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentPays = res.data.data.list;
						this.totalPage = res.data.data.pages;
					}
				})
			},
			getAll() {
				//获取所有商品信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allGoods = res.data.data;
					}
				})
				//获取所有单位信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allUnits = res.data.data;
					}
				})
				//获取所有供应商信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allSuppliers = res.data.data;
					}
				})
				//获取所有仓库信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allStorages = res.data.data;
					}
				})
			}
		},
		mounted() {
			// this.getAll();
			this.goPage(1);
		}
	}
</script>

<style>

</style>